<template>
	<!-- 配送费用预览 -->
	<view class="distributionPreview-mian">
		<!-- 地图 -->
		<view class="distributionPreview-map">
			<map id="map" :longitude="storeInfo.lng" :latitude="storeInfo.lat" scale="14" :markers="markers" show-location style="width: 100%; height: 400px"></map>
		</view>

		<!-- 配送费用 -->
		<view class="distributionPreview-info">
			<view class="distributionPreview-tabbar">
				<view class="tabbarItem" @click="changeCurrent('1')" :class="[current == '1' ? 'active' : '']">达达秒送</view>
				<view class="tabbarItem" @click="changeCurrent('2')" :class="[current == '2' ? 'active' : '']">UU跑腿</view>
			</view>
			<view class="infos" v-if="orderInfo">
				<view class="infoItem">
					<view class="infoItem-label">配送距离</view>
					<view class="infoItem-value">{{ orderInfo.distance ? (orderInfo.distance / 1000).toFixed(2) : '0.00' }}km</view>
				</view>
				<view class="infoItems">
					<view class="infoItem-label">平台订单号</view>
					<view class="infoItem-num" style="font-size: 12px">
						{{ orderInfo.deliveryNo || '暂无订单号' }}
					</view>
				</view>
				<view class="infoItem">
					<view class="infoItem-label">实际运费(单位：元)</view>
					<view class="infoItem-value">￥{{ orderInfo.fee ? orderInfo.fee.toFixed(2) : '0.00' }}</view>
				</view>
				<view class="infoItem">
					<view class="infoItem-label">运费(单位：元)</view>
					<view class="infoItem-value">￥{{ orderInfo.deliverFee ? orderInfo.deliverFee.toFixed(2) : '0.00' }}</view>
				</view>
			</view>

			<view class="wktNone" v-else>
				<view class="images">
					<image src="" mode="widthFix" style="width: 160rpx"></image>
				</view>
				<view class="noneText">当前城市暂未开通配送服务！</view>
			</view>
		</view>

		<view class="distributionPreview-btn" :style="bottomStyle" v-if="orderInfo">
			<view class="btn" @click="getCancelOrder">取消订单</view>
			<view class="btn active" @click="getflashManageDistribution">确认配送</view>
		</view>
	</view>
</template>

<script>
import { flashManageDistributionPreview, flashManageOrderCancel, flashManageDistribution } from '../../../api/flashManage/index.js';
export default {
	data() {
		return {
			// 订单ID
			orderId: null,
			// 订单信息
			orderInfo: {},
			current: 1,
			markers: [
				{
					id: 0,
					latitude: 0,
					longitude:0,
					width: 30,
					height: 30,
					title: "目的地",
				}
			],
			storeInfo:{
				lng:0,
				lat:0
			}
		};
	},
	onLoad(option) {
		const { id } = option;
		this.orderId = id;
		this.getflashManageDistributionPreview();
	},
	onShow() {
		this.storeInfo = this.$store.state.storeInfo;
	},
	computed: {
		bottomStyle() {
			const systemInfo = uni.getSystemInfoSync();
			const { safeAreaInsets } = systemInfo;
			const bottomSafeAreaHeight = safeAreaInsets.bottom || 0;
			return `padding-bottom: ${bottomSafeAreaHeight ? bottomSafeAreaHeight + 'px' : '20rpx'}`;
		}
	},
	methods: {
		// 获取订单信息
		async getflashManageDistributionPreview() {
			try {
				const resData = await flashManageDistributionPreview({
					id: this.orderId,
					platform: this.current,
					type:this.$store.state.storeType
				});
				this.orderInfo = resData.data;
				this.markers[0].latitude = this.orderInfo.to_lat;
				this.markers[0].longitude = this.orderInfo.to_lng;
			} catch (e) {
				throw Error(e);
			}
		},

		// 切换配送平台
		changeCurrent(index) {
			this.current = index;
			this.orderInfo = null;
			this.getflashManageDistributionPreview();
		},

		// 取消订单
		async getCancelOrder(id) {
			uni.showModal({
				title: '提示',
				content: '是否要取消当前订单？',
				success: async (res) => {
					if (res.confirm) {
						try {
							const resData = await flashManageOrderCancel({
								id: this.orderId,
								type:this.$store.state.storeType
							});
							uni.showToast({
								title: '取消成功',
								icon: 'none'
							});
							setTimeout(()=>{
								uni.navigateBack(-1);
							},500)
						} catch (e) {
							throw Error(e);
						}
					}
				}
			});
		},

		// 确认配送
		async getflashManageDistribution() {
			if (!this.orderInfo.deliveryNo) {
				return uni.showToast({
					title: '订单号缺失',
					icon: 'error'
				});
			}
			try {
				const resData = await flashManageDistribution({
					id: this.orderId,
					platform: this.current,
					deliveryNo: this.orderInfo.deliveryNo,
					type:this.$store.state.storeType
				});
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				});
				setTimeout(()=>{
					uni.navigateBack(-1);
				},500)
			} catch (e) {
				throw Error(e);
			}
		}
	}
};
</script>

<style>
page {
	background-color: #fff;
	height: 100%;
}
</style>

<style scoped lang="scss">
.distributionPreview-mian {
	.distributionPreview-map {
		height: 400px;
		background-color: #f3f3f3;
	}

	.distributionPreview-info {
		box-sizing: border-box;
		padding: 20rpx;
		.distributionPreview-tabbar {
			display: flex;
			align-items: center;
			height: 60rpx;
			border-bottom: 1px #f3f3f3 solid;
			padding-bottom: 20rpx;
			.tabbarItem {
				flex: 1;
				font-size: 26rpx;
				text-align: center;
			}

			.active {
				font-weight: bold;
				font-size: 28rpx;
				color: #2979ff;
			}
		}

		.infos {
			.infoItem {
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 26rpx;
				color: #444;
				.infoItem-label {
					color: #999;
				}
			}

			.infoItems {
				font-size: 26rpx;
				color: #444;
				background-color: #f3f3f3;
				box-sizing: border-box;
				padding: 20rpx;
				border-radius: 10rpx;
				.infoItem-label {
					color: #999;
				}
				.infoItem-num {
					margin-top: 10rpx;
				}
			}
		}

		.wktNone {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			font-size: 26rpx;
			color: #444;
			height: 300rpx;
			.noneText {
				margin-top: 20rpx;
			}
		}
	}

	.distributionPreview-btn {
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		display: flex;
		box-sizing: border-box;
		padding: 20rpx;
		gap: 10px;
		border-top: 1px #f3f3f3 solid;
		.btn {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			height: 80rpx;
			background-color: #f3f3f3;
			color: #444;
			border-radius: 10rpx;
		}

		.active {
			background-color: #2979ff;
			color: #fff;
		}
	}
}
</style>
